<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
		<title>实时路况查询</title>
		<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css">
		<link rel = "stylesheet" type = "text/css" href = "./basic.css">
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=IG6NWFU5qDEPKrUuX4wTYIZT"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4&amp;ak=&amp;services=&amp;t=20140320104737"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	</head>
	<?php
		include("conn.php");
		$sql1 = "SELECT ID,EW,WE,SN,NS,Time FROM length";
		$query1 = mysql_query($sql1);
		$row1 = mysql_fetch_array($query1);
		$sql2 = "SELECT JingDu,WeiDu FROM info";
		$query2 = mysql_query($sql2);
		$row2 = mysql_fetch_array($query2);
	?>
	<body>
		<div id = "top_navigation"><div id = "description"><ul><li><a href = "./index.php" style="font-weight:bold;color:#FFF;">长安大学_Sniffer团队
</a></li></ul></div></div>
		<div id = "top_logo"><div id = "header"><img src = "imag/logo.gif" /></div></div>
		<div id = "main">
			<div style = "height: 554px" id = "main_left">
					<div id = "text">
						<div id = "location"><h2>&nbsp;</h2></div>
						<div id = "length">
							<h2>当前路口ID：<?php echo $row1["ID"]; ?></h2>
							<h2>由东往西排队长度为：<?php echo $row1["EW"]; ?></h2>
							<h2>由西往东排队长度为：<?php echo $row1["WE"]; ?></h2>
							<h2>由南往北排队长度为：<?php echo $row1["SN"]; ?></h2>
							<h2>由北往南排队长度为：<?php echo $row1["NS"]; ?></h2>
							<h2>更新时间：<?php echo $row1["Time"]; ?></h2>
						</div>
						<div id = "weather"><hr><iframe width="329" scrolling="no" height="90" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=7&icon=1&num=3"></iframe></div>
					</div>
				</div>
				<div id = "bottom"><a href = "http://it.chd.edu.cn/" target = "_bank">联系我们</a></div>
			</div>
			<div id = "main_right">
				<div id = "map_container_tools">
					<div id = "city"></div>
				</div>
				<div style="height: 518px" id = "container"></div>
			</div>
		</div> 	
	</body>
</html>
<script type="text/javascript">
	var map = new BMap.Map("container");          // 创建地图实例
	var point = new BMap.Point(<?php echo $row2["JingDu"]; ?>, <?php echo $row2["WeiDu"]?>);  // 创建点坐标
	map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom();
	map.addControl(new BMap.NavigationControl());
	var marker=new BMap.Marker(point);
	map.addOverlay(marker);	
	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
	var ctrl = new BMapLib.TrafficControl({
           showPanel: false //是否显示路况提示面板
    });  
    map.addControl(ctrl);
    //创建本地城市位置的实例
   	// var localCity = new BMap.LocalCity();
    // localCity.get(function (r) {
    // 	document.getElementById("city").innerHTML = "<span>" + r.name + "</span>";
    // });
    ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
    // 创建地理编码实例
    var myGeo = new BMap.Geocoder();  
	// 根据坐标得到地址描述
	myGeo.getLocation(point, function(result){  
 	if (result){  
   		document.getElementById("city").innerHTML="<span>"+result.address+"</span>";	
 		}  
	});
	var m;
	m = setInterval("fun()",1000);
    function fun() {
		if (window.XMLHttpRequest)
		{
		  	xmlhttp=new XMLHttpRequest();
		}
		else
		{
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		{
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    	document.getElementById("length").innerHTML=xmlhttp.responseText;
		    }
		}
		xmlhttp.open("GET","select.php",true);
		xmlhttp.send();
    }
</script>
<script>
	jQuery("#container").height(jQuery(window).height()-152);
	jQuery("#main_left").height(jQuery(window).height()-116);
	jQuery(window).resize(function(){
		jQuery("#container").height(jQuery(window).height()-152);
		jQuery("#main_left").height(jQuery(window).height()-116);
	})
</script>